<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
	function deleteElement(id){
		customConfirmation("Realmente desea eliminar el cliente", function(){// agregar un mensaje aceptar/cancelar para confirmar si se elimina o no.
		$.getJSON("removeCliente", { id: id }, function(json) {
				if(json.status==true){
					var oTable = $('#tablaClientes').dataTable();
					oTable.fnDraw();
					customAlert("El cliente se elimino correctamente");
				}else{
					customAlert("Ocurrio un error al intentar eliminar el cliente");
				}
		    });
		}, function(){ });
	}
	
	function showDetail(id) {
	    $.getJSON("getClienteDetail", { id: id }, function(cliente) {
	        $("#upd_id").val(cliente.id);
	        $("#upd_nombre").val(cliente.nombre);
	        $("#upd_tel").val(cliente.telefono);
	        $("#upd_mail").val(cliente.email);
	        $("#actualizarClienteDialog").dialog("open");
	    });
	}
	
	function addNewCliente(){
		var nombre = $("#add_nombre").val();
		var telefono = $("#add_telefono").val();
		var email = $("#add_email").val();
		$.getJSON("addCliente", { nombre:nombre, telefono:telefono, email:email }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaClientes').dataTable();
				oTable.fnDraw();
				customAlert("El cliente se agrego correctamente");
			}else{
				customAlert("Ocurrio un error al intentar agregar el cliente");
			}
	    });
	}
	
	function updateCliente() {
		var id = $("#upd_id").val();
		var nombre = $("#upd_nombre").val();
		var telefono = $("#upd_tel").val();
		var email = $("#upd_mail").val();
		$.getJSON("updateCliente", { id:id, nombre:nombre, telefono:telefono, email:email }, function(json) {
			if(json.status==true){
				var oTable = $('#tablaClientes').dataTable();
				oTable.fnDraw();
				customAlert("El cliente se actualizo correctamente");
			}else{
				customAlert("Ocurrio un error al intentar agregar el cliente");
			}
	    });
	}
	
	function clearFilters(){
		var filter_box = $(".dataTables_filter input");
		
		$.each(filter_box, function (index, item){
			item.value="";
		});
		
		var oTable = $('#tablaClientes').dataTable();
		oTable.fnResetAllFilters();
	}
	
	$(function() {
		var allFields = $([]).add("#add_nombre").add("#add_email").add("#add_telefono");
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 280,
			width: 270,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );
	
					bValid = bValid && checkLength( $("#add_nombre"), "Nombre", 3, 200 );
					bValid = bValid && checkRegexp( $("#add_nombre"), /^[a-z]([0-9a-z_ ])+$/i, "En nombre consiste en: a-z, 0-9, _, y empieza con una letra." );
					
					if($("#add_email").val().length!=0){
						bValid = bValid && checkRegexp( $("#add_email"), /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ejemplo@proveedor.com.ar" );
						bValid = bValid && checkLength( $("#add_email"), "E-mail", 6, 80 );
					}
					
					if($("#add_telefono").val().length!=0){
						bValid = bValid && checkLength( $("#add_telefono"), "Telefono", 5, 25 );
						bValid = bValid && checkRegexp( $("#add_telefono"), /^([0-9-\(\) +])+$/, "El Campo telefono solo admite: 0-9 ( ) +" );
					}
					
					if (bValid) {
						addNewCliente();
						var oTable = $('#tablaClientes').dataTable();
						oTable.fnDraw();
						$(this).dialog( "close" );
					}
				},
				"Cancelar": function() {
					$(this).dialog( "close" );
				}
			},
			close: function() {
				allFields.val("").removeClass("ui-state-error");
			}
		});
		
		$("#actualizarClienteDialog").dialog({
			autoOpen: false,
			height: 280,
			width: 270,
			modal: true,
			resizable: false,
			buttons: {
				"Aceptar":  function() {
					updateCliente();
					$(this).dialog("close");
				},
				"Cancelar": function() {
					$( this ).dialog("close");
				}
			}
		});
		
		$("button, input:submit").button();
		$("#nav > li").removeClass("current");
		$("#nav_cliente").addClass("current");
		
		tablaClientes = $('#tablaClientes').dataTable( {
            "bFilter": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "clientes",
            "sAjaxDataProp": "clientes",
            "bLengthChange": false,
            "bPaginate": true,
            "bSort": false,
            "iDisplayLength": 10,
            "bStateSave": true,
            "oLanguage": {
                "sProcessing":   "Buscando...",
                "sZeroRecords":  "No se encontraron registros.",
                "sInfo":         "Clientes de _START_ hasta _END_ de un total de _TOTAL_ ",
                "sInfoFiltered": "(Total de _MAX_)",
                "sInfoPostFix":  "",
                "sSearch":       "Busqueda por Nombre:"
            },
            "aoColumns": [
              { "mData": "id" },
              { "mData": "nombre" },
              { "mData": "telefono" },
              { "mData": "email",
            	"bUseRendered": false
           	  },
              { 
           		"mData": "id",
            	"fnRender": function (o, val) {
            		var editImg = "<c:url value="/resources/img/pencil.gif"/>";
            		var deleteImg = "<c:url value="/resources/img/minus-circle.gif"/>";
            		var link = '<a href="#" onclick="showDetail(' + val + ')"><img src="' + editImg + '" width="16" height="16" alt="Modificar"></a>';
                  	link += '<a href="#" onclick="deleteElement(' + val + ')"><img src="' + deleteImg +'" width="16" height="16" alt="Eliminar"></a>';
                  	return link;
  				},
  				"bUseRendered": false
              }
            ],
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json);
                });
            }
        });
		
		clearFilters();
	});
</script>
<div class="grid_12">
	<div class="module">
	<h2><span>Lista de clientes</span></h2>
	    <div class="module-body">
			<table id="tablaClientes">
				<thead>
					<tr>
						<th style="width:10%">Id</th>
						<th style="width:29%">Nombre</th>
						<th style="width:13%">Telefono</th>
						<th style="width:28%">Email</th>
						<th style="width:10%">Accion</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<div style="clear:both"></div>
			<button onclick="$('#dialog-form').dialog('open');">Nuevo cliente</button>
		</div>
		
		<!-- Popups (+) -->
		<div id="actualizarClienteDialog" title="Actualizar datos de cliente">
			<fieldset>
				<input type="text" id="upd_id" style="width:95%" class="text ui-widget-content ui-corner-all" style="display:none" readonly="readonly"/>
				<label for="name">Nombre</label>
				<input type="text" id="upd_nombre" style="width:95%" class="text ui-widget-content ui-corner-all" />
				<label for="telefono">Telefono</label>
				<input type="text" id="upd_tel" style="width:95%" class="text ui-widget-content ui-corner-all" />
				<label for="e-mail">E-mail</label>
				<input type="text" id="upd_mail" style="width:95%" class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</div>

		<div id="dialog-form" title="Agregar nuevo cliente" >
			<p class="validateTips" style="color:red">* Campos requeridos</p>
			<form>
				<fieldset>
					<label for="nombre"><span style="color:red">* </span>Nombre</label>
					<input type="text" name="nombre" id="add_nombre" style="width:95%" class="text ui-widget-content ui-corner-all" />
					<label for="telefono">Telefono</label>
					<input type="text" name="telefono" id="add_telefono" style="width:95%" value="" class="text ui-widget-content ui-corner-all" />
					<label for="email">E-mail</label>
					<input type="email" name="email" id="add_email" style="width:95%" value="" class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
		<!-- Popups (-) -->
		
		
	</div>
	<div style="clear:both;"></div>
</div>
